<template>
	<view class="index-page page">
		<image src="/static/index/top-bg.png" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="false" :topBgColor="topBgColor" title="码上就业"></CustomNav>
		<view class="count-block block">
			<view class="count-item">
				<view class="count-name FZHZGBJ">访问量</view>
				<view class="count FZHZGBJ">{{count.browseCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FZHZGBJ">岗位数</view>
				<view class="count FZHZGBJ">{{count.jobCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FZHZGBJ">注册人数</view>
				<view class="count FZHZGBJ">{{count.customerCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FZHZGBJ">企业数</view>
				<view class="count FZHZGBJ">{{count.enterpriseCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FZHZGBJ">求职成功数</view>
				<view class="count FZHZGBJ">{{count.deliveryCount}}</view>
			</view>
		</view>
		<view class="menu-block block">
			<view class="block-title">
				<view class="line">
					</ view>
					<view class="FZHZGBJ title">县（市、区）子平台</view>
				</view>
				<view class="menu-content">
					<view @click="jumpMiniProgram(item.appid)" class="menu-item" v-for="item in menu" :key="item.id">
						<image :src="item.icon" class="menu-icon"></image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="questionnaire">
				<view class="district" @click="navigate1('/page_other/project_right/index/index')">
					<view class="title">
						我要维权
					</view>
					<view class="more">
						<view class="small-title">
							点这里
						</view>
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more1.png">
						</image>
					</view>
					<!-- <image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/wq.png"></image> -->
				</view>
				<view class="district1" @click="navigate1('/page_other/survey/index')">
					<view class="title">
						就业调查
					</view>
					<view class="more">
						<view class="small-title">
							点这里
						</view>
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more1.png">
						</image>
					</view>
				</view>
			</view>
			<view class="menu-block block">
				<view class="block-title">
					<view class="line"></view>
					<view class="FZHZGBJ title">码上创业 一件事一次办</view>
				</view>
				<view class="menu-content">
					<view class="top">
						<view class="district" @click="navigate1('/page_other/business_loan/new_bus_loan/index')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/1.png">
							</image>
						</view>
						<view class="district" @click="navigate1('/page_other/site/index')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/2.png">
							</image>
						</view>
					</view>

					<view class="middle">
						<view class="district" @click="navigate1('/page_other/teacher/index')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/3.png">
							</image>
						</view>
						<view class="district" @click="navigate1('/page_other/train/indexBefore')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/4.png">
							</image>
						</view>
						<view class="district" @click="navigate1('/page_other/policey/policey')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/5.png">
							</image>
						</view>
					</view>
					<view class="bottom">
						<view class="district" @click="navigate1('/page_other/entrepot/index')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/6.png">
							</image>
						</view>
						<view class="district" @click="navigate1('/page_other/drive/detail')">
							<image class="img"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/7.png">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="article-block block">
				<view class="tab-block">
					<view :class="tabActive==1?'active':''" @click="tabActive=1" class="tab-item">政策法规</view>
					<view :class="tabActive==2?'active':''" @click="tabActive=2" class="tab-item">通知公告</view>
					<view :class="tabActive==3?'active':''" @click="tabActive=3" class="tab-item">职场资讯</view>
				</view>
				<view class="list-block">
					<view @click="navigate1('/pages/index/detail2?id='+item.id)" class="list-item"
						v-for="(item,index) in info" :key="item.id" v-if="tabActive==2||tabActive==1">
						<image class="cover" :src="item.ima_url"></image>
						<view class="article-info">
							<view class="title">{{item.title}}</view>
							<view class="abstract">{{item.abstract}}</view>
							<view class="time">{{item.crt_time}}</view>
						</view>
					</view>
					<view @click="navigate(index)" class="list-item" v-for="(item,index) in article[tabActive-1]"
						:key="item.id">
						<image class="cover" :src="item.cover"></image>
						<view class="article-info">
							<view class="title">{{item.title}}</view>
							<view class="abstract">{{item.abstract}}</view>
							<view class="time">{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 弹框内容 -->
			<view class="uniappBox">
				<view :hidden="!uniappShowModel" class="uniappContant">
					<view>
						<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
						<view class="swiper-item" style="height: 480rpx;width: 100%;">
							<img @click="videoPlay()"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dkxc.png"
								style="width: 100%;padding: 40rpx;height: 90%;" alt="" srcset="">
							<video style="width: 0;height: 0;z-index: 10000;" id="demoVideo"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dk.mp4">
							</video>
						</view>
					</view>
					<view style="width: 100%;text-align: center;font-size: 32rpx;font-weight: 900;">
						公告消息提醒
					</view>
					<view style="width: 90%;text-align: center;font-size: 28rpx;margin-top: 10rpx;margin-left: 30rpx;">
						酒泉市高校毕业生创业担保贷款政策来了！
					</view>

					<view class="btn"
						style="width: 280rpx;text-align: center;height: 80rpx;display: flex;justify-content: center;align-items: center;background: #ff3057;color: #fff;font-size: 28rpx;border-radius: 40rpx;margin: 0 auto;margin-top: 60rpx;"
						@click="updatePopup">
						我知道了
					</view>
					<!-- <view style="width: 10px;margin-left: 49%;margin-top: 40rpx;color: #fff;" @click="updatePopup">×</view> -->
				</view>

				<!-- 背景黑色蒙版 -->
				<view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
			</view>
		</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav'
	import {
		getStatistics,
		getNewsList,
		addUserCount,
		getPushInfo,
		updatePopup,
	} from '@/api/api.js';
	export default {
		components: {
			CustomNav
		},
		data() {
			return {
				uniappShowModel: true,
				count: {
					enterpriseCount: 0,
					jobCount: 0,
					customerCount: 0,
					browseCount: 0,
					deliveryCount: 0,
				},
				id: 0,
				page: 1,
				limit: 11,
				type: 2166,
				topBgColor: 'rgba(0,0,0,0)',
				info: [],
				article: [
					[{
							id: 1,
							title: '@企业：吸纳高校毕业生就业，收好这份政策礼包！',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_1.jpg',
							abstract: '企业是高校毕业生就业的主渠道，中小微企业是高校毕业生就业的主阵地',
							time: '2023-06-14'
						},
						{
							id: 2,
							title: '【就业】以高质量充分就业助力中国式现代化',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_3.jpg',
							abstract: '就业是最基本的民生。党的二十大报告提出“促进高质量充分就业”的目标要求',
							time: '2023-06-06'
						},
						{
							id: 3,
							title: '【就业】聚焦待就业青年十部门实施百万就业见习岗位募集计划',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_4.jpg',
							abstract: '人民网北京5月25日电  就业见习是增强青年岗位实践能力的重要途径',
							time: '2023-05-29'
						},
						{
							id: 4,
							title: '一分钟了解国务院稳就业最新政策',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_4.jpg',
							abstract: '支持稳岗扩岗、一揽子兑现补贴、募集100万个见习岗位……近日，国务院召开常务会议，研究优化调整稳就业政策措施。国务院办公厅印发通知，明确三方面政策。',
							time: '2023-05-18'
						},
						{
							id: 5,
							title: '人力资源社会保障部、司法部联合行动维护农民工劳动报酬权益',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_4.jpg',
							abstract: '本报北京6月8日电  近日，人力资源社会保障部办公厅、司法部办公厅印发《关于开展“薪暖农民工”服务行动的通知》，对维护农民工劳动报酬权益等工作做出部署安排。',
							time: '2023-06-14'
						},
					],
					[{
							id: 6,
							title: '关于2023年酒泉市公安局警务技能训练教官岗位专业技能笔试（加试）事宜的通知',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_4.jpg',
							abstract: '根据《2023年酒泉市市直事业单位公开招聘工作人员公告》，对报考酒泉市公安局警务技能训练教官岗位（岗位代码：JQ28）且初试合格的考生进行专业技能笔试（加试）。请相关考生携有效期内身份证原件、笔试准考证参加专业技能笔试（加试），具体时间、地点如下',
							time: '2023-06-15'
						},
						{
							id: 7,
							title: '2023年酒泉市市直事业单位公开招聘工作人员公告',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_5.jpg',
							abstract: '根据《甘肃省事业单位公开招聘人员暂行办法》，结合事业单位工作需要，经研究决定，为酒泉市市直事业单位面向社会公开招聘工作人员。现将有关事项公告如下',
							time: '2023-04-28'
						},
						{
							id: 8,
							title: '2023年酒泉市县市区教育系统事业单位公开招聘工作人员公告',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_1.jpg',
							abstract: '根据《甘肃省事业单位公开招聘人员暂行办法》，结合事业单位工作需要，经研究决定，为酒泉市各县（市、区）教育系统事业单位面向社会公开招聘工作人员。现将有关事项公告如下',
							time: '2023-04-07'
						},
						{
							id: 9,
							title: '2022年甘肃酒泉核产业园管理委员会专项招聘事业单位工作人员公告',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_1.jpg',
							time: '2022-09-14',
							abstract: '根据《甘肃省事业单位公开招聘人员暂行办法》，结合事业单位工作需要，经研究决定，为甘肃酒泉核产业园管理委员会面向社会公开招聘工作人员。现将有关事项公告如下'
						},
						{
							id: 10,
							title: '2022年敦煌市事业单位公开招聘取消和降低部分岗位笔试开考比例的公告',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_1.jpg',
							time: '2022-12-08',
							abstract: '敦煌市事业单位公开招聘工作人员报名工作现已结束，按照《2022年敦煌市事业单位公开招聘工作人员公告》要求，部分岗位因无人报考或达不到开考比例，招聘计划取消或降低笔试开考比例，现将部分岗位公告如下'
						},
					],
					[{
							id: 11,
							title: '毕业生八大求职“陷阱”及避“坑”提示',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_1.jpg',
							abstract: '现在正值求职季，高校毕业生即将走向职场，开启人生新篇章。但一些不法分子专挑涉世未深的毕业生求职者进行欺诈，让人不得不防',
							time: '2023-05-22'
						},
						{
							id: 12,
							title: '就业指导 | 如何进行职业生涯规划？',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_2.jpg',
							abstract: '疫情对一些传统行业产生了不小冲击，同时也催生了一批新的行业。面对形形色色的职业，究竟哪一个才是顺应当下，你的最佳选择呢',
							time: '2022-05-10'
						},
						{
							id: 13,
							title: '大学生就业指导的意义是什么',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_3.jpg',
							abstract: '不管是从事一种工作或自己创业，若能有人做正确的指引则可以减少自己艰辛的过程，如大学生在就业过程中若能够有人进行大学生就业指导，则可以更明确方向，调理好求职心理。以下资料为小编整理的大学生就业指导的意义是什么',
							time: '2023-04-25'
						},
						{
							id: 14,
							title: '大学生就业指导教育中存在的问题及建议',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_3.jpg',
							abstract: '虽然各高职院校都设立了就业管理部]，并由此部门负责毕业生的就业问题，但教学单位分设就业指导机构的较少',
							time: '2023-04-07'
						},
						{
							id: 15,
							title: '大学生就业指导包括那些内容',
							cover: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/article_3.jpg',
							abstract: '对于大学生的就业来说，不管是哪一年的大学毕业生，他们都要经历非常严峻的考验，这不仅仅只是他们对于自己今后的职业发展的一个影响因素，更是他们如何实现自己在职场当中取得较好的成果必须要突破的困难',
							time: '2023-03-08'
						},
					],

				],
				tabActive: 1,
				menu: [{
						id: 1,
						appid: 'wxdd76ace6fe61c802',
						icon: '/static/index/szq.jpg',
						name: '肃州区'
					},
					{
						id: 2,
						appid: 'wx46dd58ecc8dc1943',
						icon: '/static/index/jt.png',
						name: '金塔县'
					},
					{
						id: 3,
						appid: 'wx3fde4d6e85900bb5',
						icon: '/static/index/ym.png',
						name: '玉门市'
					},
					{
						id: 4,
						appid: 'wxa28b49d4f51fca65',
						icon: '/static/index/gz.png',
						name: '瓜州县'
					},
					{
						id: 5,
						appid: 'wx4749966a79e1bc10',
						icon: '/static/index/dh.png',
						name: '敦煌市'
					},
					{
						id: 6,
						appid: 'wx927e6ada24a587a4',
						icon: '/static/index/sb.jpg',
						name: '肃北县'
					},
					{
						id: 7,
						appid: 'wx8b5d4f44524eab37',
						icon: '/static/index/aks.png',
						name: '阿克塞县'
					},
				]
			}
		},
		methods: {
			navigate1(url) {
				// wx.navigateToMiniProgram({
				// 	appId: 'wx5f3e4e225c226ff9'
				// })
				uni.navigateTo({
					url
				})
			},
			handlechange(e) {

			},
			confirm() {
				this.uniappShowModel = false
				// this.navigate1('/pages/index/detail2?id=469')
			},
			jumpMiniProgram(appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid
					})
				}
			},
			navigate(index) {
				const item = this.article[this.tabActive - 1][index];
				uni.navigateTo({
					url: `/pages/index/detail?id=${item.id}&title=${item.title}&time=${item.time}`
				})
			},
			navigate1(url) {
				uni.navigateTo({
					url
				})
			},
			getCount() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getStatistics().then((res) => {
					this.count.browseCount = res.browseCount || 0;
					this.count.jobCount = res.jobCount || 0;
					this.count.customerCount = res.customerCount || 0;
					this.count.enterpriseCount = res.enterpriseCount || 0;
					this.count.deliveryCount = res.deliveryCount || 0;
				})
			},
			//政策列表
			getList(type) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getNewsList({
					page: this.page,
					limit: this.limit,
					type: type,
				}).then(data => {
					uni.hideLoading()
					this.info = data.list
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//访问记录
			addUserCount() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const hasToken = this.$store.getters.token;
				addUserCount({
					token: hasToken
				}).then(data => {
					uni.hideLoading()
					console.log(data)
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//推送消息
			getPushInfo() {
				const hasToken = this.$store.getters.token;
				if (hasToken == '' || hasToken == null) {
					return this.uniappShowModel = false
				} else {
					getPushInfo({
						token: hasToken
					}).then(data => {
						uni.hideLoading()
						const popupStatus = data.popupStatus
						console.log(data.popupStatus)
						if (popupStatus != 1) {
							this.uniappShowModel = true
						} else {
							this.uniappShowModel = false
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}
			},
			//确认按钮
			updatePopup() {
				const hasToken = this.$store.getters.token;
				if (hasToken) {
					updatePopup({
						token: hasToken
					}).then().finally(() => {

					})
				}
				this.confirm()

			},
			videoPlay() {

				this.videoContext = uni.createVideoContext('demoVideo', this);
				this.videoContext.requestFullScreen();
				// this.videoContext.videoPlay();

			},
		},
		onShareAppMessage: function(res) {
			return {
				title: '"码"上就业',
				path: '/pages/index/index'
			}
		},
		watch: { //监听
			tabActive: {
				handler(val) {
					if (val < 3) {
						let type = (val == 1) ? 2166 : 2165
						this.getList(type);
					}
				},
				//immediate:true,//深度监听
			},
		},
		onShow() {
			this.getCount()
		},
		onLoad() {
			//政策列表
			this.getList(2166);
			//访问记录
			this.addUserCount()
			//推送消息
			// this.getPushInfo()
		}
	}
</script>
<style scoped>
	.uniappBgdCol {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1000;
		-moz-opacity: 0.6;
		opacity: .6;
		filter: alpha(opacity=88);
	}

	.uniappContant {
		position: fixed;
		top: 30%;
		left: 55%;
		width: 70%;
		height: 53%;
		margin-left: -40%;
		background-color: white;
		z-index: 1001;
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.index-page {
		overflow: hidden;

		.top-bg {
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.count-block {
			margin: 0 auto;
			background: #fff;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			margin-top: -170rpx;
			font-size: 30rpx;

			.count-item {
				font-size: 24rpx;
				width: calc((100% - 6px)/4);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.count {
					color: #ff0027;
					margin-top: 15rpx;
				}
			}

			.line {
				height: 48rpx;
				width: 2px;
				border-radius: 100%;
				background-image: linear-gradient(#fff, rgba(255, 11, 11, 0.5), #fff);
			}
		}

		.questionnaire {
			margin: 0 auto;
			width: 100%;
			display: flex;
			padding: 0 30rpx;

			.district {
				width: calc((100% - 40rpx)/2);
				height: 180rpx;
				border-radius: 10rpx;
				margin: 0 auto;
				background: url(https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/wq.png) no-repeat center;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 30rpx;

				.img {
					width: 100%;
					height: 100%;
				}

				.title {
					color: #fff;
					margin-bottom: 10rpx;
					font-weight: 900;
				}

				.more {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.small-title {
						color: #fff;
						font-size: 28rpx;
					}

					.img {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.district1 {
				width: calc((100% - 40rpx)/2);
				height: 180rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				background: url(https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/wj.png) no-repeat center;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 30rpx;

				.img {
					width: 100%;
					height: 100%;
				}

				.title {
					color: #fff;
					margin-bottom: 10rpx;
					font-weight: 900;
				}

				.more {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.small-title {
						color: #fff;
						font-size: 28rpx;
					}

					.img {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.menu-block {
			margin: 30rpx auto;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;

			.menu-content {
				width: 750rpx;

				.top {
					width: 100%;
					display: flex;

					.district {
						width: calc((100% - 40rpx)/2);
						height: 180rpx;
						margin: 20rpx auto 0;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.middle {
					width: 100%;
					display: flex;

					.district {
						width: calc((100% - 60rpx)/3);
						height: 260rpx;
						margin: 20rpx auto 0;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.bottom {
					width: 100%;
					display: flex;

					.district {
						width: calc((100% - 40rpx)/2);
						height: 180rpx;
						margin: 20rpx auto 0;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.block-title {
				width: 100%;
				display: flex;
				align-items: center;

				.line {
					width: 14rpx;
					height: 32rpx;
					background: #fc0329;
					border-radius: 35%;
					margin-right: 20rpx;
				}
			}

			.menu-content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.menu-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;

					.menu-icon {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.menu-name {
						font-size: 28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.article-block {
			margin: 0 auto;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.tab-block {
				display: flex;

				.tab-item {
					font-size: 34rpx;
					padding-bottom: 10rpx;
					margin-right: 30rpx;
					font-weight: bold;
				}

				.tab-item.active {
					color: #fc0329;
					border-bottom: 2px solid #fc0329;
				}
			}

			.list-block {
				.list-item {
					display: flex;
					padding-bottom: 30rpx;
					border-bottom: 1px solid #efefef;
					margin-top: 30rpx;

					.cover {
						width: 150rpx;
						height: 150rpx;
						border-radius: 12px;
						margin-right: 20rpx;
					}

					.article-info {
						width: calc(100% - 170rpx);

						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 34rpx;
							font-weight: bold;
						}

						.abstract {
							font-size: 28rpx;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 20rpx;
						}

						.time {
							margin-top: 20rpx;
							font-size: 28rpx;
							color: #999;
						}
					}
				}

				.list-item:last-child {
					border-bottom: none;
					padding-bottom: 0;
				}
			}
		}
	}
</style>